<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">徽章-> 文档请参考：
          <a href="http://www.layui.com/doc/element/badge.html" target="_blank">
            <span>http://www.layui.com/doc/element/badge.html</span>
          </a>
        </div>
        <div class="layui-card-body">

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>小徽章、大家族</legend>
          </fieldset>

          <blockquote class="layui-elem-quote layui-quote-nm">
            小圆点：
            <span class="layui-badge-dot"></span>
            <span class="layui-badge-dot layui-bg-orange"></span>
            <span class="layui-badge-dot layui-bg-green"></span>
            <span class="layui-badge-dot layui-bg-cyan"></span>
            <span class="layui-badge-dot layui-bg-blue"></span>
            <span class="layui-badge-dot layui-bg-black"></span>
            <span class="layui-badge-dot layui-bg-gray"></span>

            <br><br>常规弧形徽章：
            <span class="layui-badge">6</span>
            <span class="layui-badge">99</span>
            <span class="layui-badge">61728</span>
            <span class="layui-badge">赤</span>
            <span class="layui-badge layui-bg-orange">橙</span>
            <span class="layui-badge layui-bg-green">绿</span>
            <span class="layui-badge layui-bg-cyan">青</span>
            <span class="layui-badge layui-bg-blue">蓝</span>
            <span class="layui-badge layui-bg-black">黑</span>
            <span class="layui-badge layui-bg-gray">灰</span>

            <br><br>边框徽章：
            <span class="layui-badge-rim">6</span>
            <span class="layui-badge-rim">Hot</span>
          </blockquote>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>与其它元素的搭配</legend>
          </fieldset>

          <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
          <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

          <br><br>

          <ul class="layui-nav" style=" text-align:right;">
            <li class="layui-nav-item ">
              <a href=" ">控制台<span class="layui-badge ">9</span></a>
            </li>
            <li class="layui-nav-item ">
              <a href=" ">个人中心<span class="layui-badge-dot "></span></a>
            </li>
          </ul>
          <br>

          <div class="layui-tab layui-tab-brief ">
            <ul class="layui-tab-title ">
              <li class="layui-this ">网站设置</li>
              <li>用户管理<span class="layui-badge-dot "></span></li>
              <li>最新邮件<span class="layui-badge ">99+</span></li>
            </ul>
            <div class="layui-tab-content "></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
</script>

<style scoped>

</style>